<template>
  <div class="design-layout">
    <el-container>
      <el-header height="40px" class="split__line"><bi-header></bi-header></el-header>
      <el-container>
        <el-aside width="200px" class="split__line"><aside-legend></aside-legend></el-aside>
        <el-container>
          <el-main class="dash-board-wrapper">
            <el-container>
            <el-main class="pd0">
<!--              <vue-ruler-tool-->
<!--                :positon="'fixed'"-->
<!--                :content-layout="{left:10,top:10}"-->
<!--                :is-scale-revise="true"-->
<!--                :is-hot-key="true"-->
<!--                :parent="true"-->
<!--                :v-model="presetLine"-->
<!--              >-->
                   <dash-board @selectIndex="selectIndex"></dash-board>
<!--              </vue-ruler-tool>-->
            </el-main>
            <el-aside width="260px" class="split__line" v-if="isOpen">
               <props-panel :index="index"></props-panel>
            </el-aside>
            </el-container>
          </el-main>
          <el-footer height="30px" class="split__line"></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import VueRulerTool from 'vue-ruler-tool'
import DashBoard from '../components/design/DashBoard'
import AsideLegend from '../components/design/AsideLegend'
import BiHeader from '../components/design/BiHeader'
import PropsPanel from '../components/design/propspanel/PropsPanel'
export default {
  name: 'MainLayout',
  components: {PropsPanel, DashBoard, AsideLegend, BiHeader, VueRulerTool},
  data () {
    return {
      index: -1,
      presetLine: [{ type: 'l', site: 100 }, { type: 'v', site: 200 }]
    }
  },
  computed: {
    isOpen () {
      return true
    }
  },
  methods: {
    selectIndex (index) {
      this.index = index
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .design-layout{
    height: 100%;
  }
  .design-layout .el-container{
    height: 100%;
  }
  .design-layout .dash-board-wrapper{
    padding: 10px;
  }

</style>
